<template>
  <div class="page-signin">

    <div class="signin-container">
      <!-- <img src="http://hsedu.iclass.cn/public/zhuji/backend/images/admin_login.jpg" alt=""> -->
      <img src="../assets/img/admin_login.png">
      <div class="signin-form">

        <div class="signin-text" style="font-style: normal;">
          <span class="color__">登录</span>
        </div>

        <div class="form-group w-icon">
          <input type="text" name="signin_username" id="username_id" class="form-control input-lg" placeholder="用户名" v-model="username_id">
          <span class="fa fa-user signin-form-icon"></span>
        </div>

        <div class="form-group w-icon">
          <input type="password" name="signin_password" id="password_id" class="form-control input-lg" placeholder="密码" v-model="password_id">
          <span class="fa fa-lock signin-form-icon"></span>
        </div>

        <div class="form-actions text-center" style="margin-top: 40px;" @click="sign()">
          <input type="button" value="登录" class="signin-btn bg-primary color__">
        </div>

        <!-- / Form -->

      </div>
    </div>
    <div class="mask">

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username_id: '',
      password_id: ''
    }
  },
  methods: {
    sign() {
      this.$axios
        .get('/login', {
          params: {
            username: this.username_id,
            password: this.password_id
          }
        })
        .then(res => {
          if (res.status === 200) {
            sessionStorage.setItem('logo', 'true')
            this.$router.push({
              name: 'BackStage'
            })
            return
          }
          alert('用户名或密码错误')
        })
    }
  }
}
</script>
<style lang="scss">
.page-signin {
}
.color__ {
  color: white;
}
.mask {
  background: url('../assets/img/bj.jpg');
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
